<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.global.js"></script>
</head>
<style>

</style>
<body>
<!--
 使用@事件名称来进行事件的绑定
 @submit     -------  onsubmit   表单提交
 @focus      -------   onfocus   获取聚集事件
 @blur       -------   onblur    失去焦点事件
 @click       -------   onclick   点击事件
 .....
 @click的值既可以是js代码，也可以是methods中定义的方法，方法中如果没有参数，则小括号可以省略
-->
<div id="app">
        <!-- 用法1 -->
        <button @click="num1 += 1">点赞1({{num1}})</button>
    <br>
        <!-- 用法2 -->
        <button @click="zan">点赞2({{num2}})</button>
    <br>
        <!-- 用法3 -->
        <button @click.once="zan2">点赞3({{num3}})</button>
    <br>
        <!-- 用法3 -->
        <button @click="zan3(2)">点赞4({{num3}})</button>
</div>
<script>
    var vm = Vue.createApp({
        data() {
            return {
                num1: 0,
                num2: 0,
                num3: 0,
            }
        },
        methods:{
            zan(){
               if (this.num2 <1){
                   this.num2++
               }
            },
            zan2(){
               if (this.num3 <10){
                   this.num3++
               }
            },
            zan3(n){
               if (this.num3 <10){
                   this.num3 += n
               }
            },

        }
    }).mount("#app")
</script>
</body>
</html>